<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>

<head>
    <title>我的订单</title>

    <%--<link href="../../../statics/bootstrap/css/bootstrap.min.css" rel="stylesheet" />--%>
    <%--<link href="../../../statics/styles/navbar.css" rel="stylesheet" />--%>




</head>

<body>



    <div class="container">
        <div div="row">

            <div class="col-sm-10">
                <div class="row" style="margin-bottom:10px">
                    <div class="col-sm-offset-8 col-sm-2">
                        <button type="button" onclick="javascript:location='${ctx}/workbench/waybill/new';" class="btn btn-success pull-right"><span class="glyphicon glyphicon-plus"></span>新建订单</button>
                    </div>
                    <div class="col-sm-2">

                        <button class="btn btn-warning pull-right" type="button" onclick="javascript:location='${ctx}/workbench/waybill/pending';">
                            待处理订单 <span id = "idPendingWaybillCnt" class="badge">0</span>
                        </button>
                    </div>

                </div>
                <div class="row">

                    <div class="panel panel-default">

                        <div class="panel-heading">
                            <div class="panel-title">我的订单 </div>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-offset-1 col-sm-10">

                                    <form class="form-horizontal" role="form" method="post" action="">

                                        <div class="col-sm-5">
                                            <input id = "idQueryInput" type="text" class="form-control" name="queryStr" placeholder="手机号码或单号">
                                        </div>

                                        <div class="div-sm-5">
                                            <button id="idQueryButton" type="button" class="btn btn-warning"><span class="glyphicon glyphicon-search"></span>查询</button>

                                        </div>

                                    </form>

                                </div>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="row" style="margin-bottom:10px">
                    <div class="col-sm-5">
                        <span>你的所有订单共3个，已选择1个</span>
                        <button id="btnBatchRecycle" type="button" class="btn btn-warning">加入回收站</button>
                    </div>
                    <div class="col-sm-offset-5 col-sm-2">
                        <button type="button" class="btn btn-info pull-right" onclick="javascript:location='${ctx}/workbench/waybill/recycling';"><span class="glyphicon glyphicon-trash"></span>回收站
                            <span id="idRecyclingTotal" class="badge">0</span>
                        </button>

                    </div>

                </div>
                <div class="row">

                    <table id="table-waybills" class="table table-bordered table-hover" data-toggle="table">
                        <thead>
                        <tr>
                            <th></th>
                            <th>发货日期</th>
                            <th>单号</th>
                            <th>收货人</th>
                            <th>发货地</th>
                            <th>目的地</th>
                            <th>物流状态</th>
                            <th>详情</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

                </div>
                <div class="row">
                    <!--                    <span class="pull-right">第1-20条记录，共100条记录</span>-->
                    <ul class="pagination pagination-sm pull-left">
                        <li class="disabled"><a href="#">&laquo;</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">&raquo;</a></li>
                    </ul>

                </div>
            </div>

        </div>
    </div>




    <!-- Large modal -->

    <div id="myRegionSelectorModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">地区选择</h4>
                </div>
                <div class="modal-body">
                    <div class="container" id="divRegionSelector"></div>
                </div>

            </div>
        </div>
    </div>


    <%--<script src="../../../statics/js/jquery-3.1.1.min.js"></script>--%>
    <%--<script src="../../../statics/bootstrap/js/bootstrap.min.js"></script>--%>
    <script src="${ctx}/statics/echarts/echarts.min.js"></script>
    <script src="${ctx}/statics/js/regionselector.js"></script>

    <script>
        $(function () {
            $("#waybills-tab").addClass("active");


            //============================================================================================
            //加载数据
            var loadWaybills = function(queryParams){

                if(queryParams == undefined){
                    queryParams = {params:{}};
                }

                //回放站运单数
                $.ajax({
                    url: '${ctx}/workbench/waybill/recycling/total',
                    type: 'post',
                    contentType: 'application/json;charset=UTF-8',
                    dataType: 'json',
                    data:JSON.stringify({params:{}}),
                    success: function (result, textStatus, jqXHR) {
                        console.log(result);
                        if(result.status == 0){
                            $('#idRecyclingTotal').html(result.data);
                        }

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        // 通常 textStatus 和 errorThrown 之中
                        // 只有一个会包含信息
                        this; // 调用本次AJAX请求时传递的options参数
                    }
                });
                //待处理订单数
                $.ajax({
                    url: '${ctx}/workbench/waybill/pending/total',
                    type: 'post',
                    contentType: 'application/json;charset=UTF-8',
                    dataType: 'json',
                    data:JSON.stringify({params:{}}),
                    success: function (result, textStatus, jqXHR) {
                        console.log(result);
                        if(result.status == 0){
                            $('#idPendingWaybillCnt').html(result.data);
                        }

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        // 通常 textStatus 和 errorThrown 之中
                        // 只有一个会包含信息
                        this; // 调用本次AJAX请求时传递的options参数
                    }
                });

                //运单列表
                $.ajax({
                    url: '${ctx}/workbench/waybills',
                    type: 'post',
                    contentType: 'application/json;charset=UTF-8',
                    dataType: 'json',
                    data:JSON.stringify(queryParams),
                    success: function (result, textStatus, jqXHR) {
                        console.log(result);
                        if(result.status == 0){
                            showWaybillTable(result.data);
                        }

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        // 通常 textStatus 和 errorThrown 之中
                        // 只有一个会包含信息
                        this; // 调用本次AJAX请求时传递的options参数
                    }
                });
            }





            loadWaybills();
            var showWaybillTable = function (waybills) {

                var html = "";
                if (waybills.length == 0) {
                    html = "<tr><td colspan='8' align='center'>没有数据....</td></tr>";
                    $('#table-waybills tbody').html(html);
                    return;
                }

                $.each(waybills, function (index, waybill) {
                            html += "<tr>"
                                    + "    <td>"
                                    + "        <div class='checkbox'>"
                                    + "            <label>"
                                    + "                <input type='checkbox' data-my-waybill-id='" + waybill.waybillId + "'>"
                                    + "            </label>"
                                    + "        </div>"
                                    + "    </td>"
                                    + "    <td>" + waybill.sendDate + "</td>"
                                    + "    <td>" + waybill.waybillNo + "</td>"
                                    + "    <td>" + waybill.receiverName + "</td>"
                                    + "    <td>" + waybill.startAddr + "</td>"
                                    + "    <td>" + waybill.endAddr + "</td>"
                                    + "    <td>" + waybill.waybillStatus + "</td>"
                                    + "    <td>"
                                    + "        <div class='btn-group'>"
                                    + "            <button type='button' class='btn btn-warning dropdown-toggle' data-toggle='dropdown'>"
                                    + "                处理"
                                    + "                <span class='caret'></span>"
                                    + "            </button>"
                                    + "            <ul class='dropdown-menu my-btn-waybill-process' role='menu'>"
                                    + "                <li><a href='javascript:void(0)' data-my-process-id='1'"
                                    + "                       data-my-waybill-id='" + waybill.waybillId + "'"
                                    + "                       data-my-waybill-no='" + waybill.waybillNo + "'>已揽件</a></li>"
                                    + "                <li><a href='javascript:void(0)' data-my-process-id='2'"
                                    + "                       data-my-waybill-id='" + waybill.waybillId + "'"
                                    + "                       data-my-waybill-no='" + waybill.waybillNo + "'>已收货</a></li>"
                                    + "                <li><a href='javascript:void(0)' data-my-process-id='3'"
                                    + "                       data-my-waybill-id='" + waybill.waybillId + "'"
                                    + "                       data-my-waybill-no='" + waybill.waybillNo + "'>待处理</a></li>"
                                    + "                <li><a href='javascript:void(0)' data-my-process-id='4'"
                                    + "                       data-my-waybill-id='" + waybill.waybillId + "'"
                                    + "                       data-my-waybill-no='" + waybill.waybillNo + "'>已中转</a></li>"
                                    + "                <li><a href='javascript:void(0)' data-my-process-id='5'"
                                    + "                       data-my-waybill-id='" + waybill.waybillId + "'"
                                    + "                       data-my-waybill-no='" + waybill.waybillNo + "'>已签收</a></li>"
                                    + "            </ul>"
                                    + "        </div>"
                                    + "        <button class='btn btn-primary my-waybill-details' data-my-waybill-id='"+waybill.waybillId+"'>点击查看详情</button>"
                                    + "    </td>"
                                    + "</tr>";
                        }
                )
                ;


                $('#table-waybills tbody').html(html);
                addClickListener();


            }

            //加载数据结束====================================================================================================

            // 按钮监听========================================================================================================
            var addClickListener = function () {
                $('.my-btn-waybill-process a').click(function () {
                    var waybillId = $(this).data("my-waybill-id");
                    var waybillNo = $(this).data("my-waybill-no");
                    var processId = $(this).data("my-process-id");
                    console.log(processId);
                    if (processId == 4) {
                        $("#myWaybillProcessModal").find(".modal-transfer-info").show();
                    } else {
                        $("#myWaybillProcessModal").find(".modal-transfer-info").hide();
                    }
                    $('#myWaybillProcessModal').find(".my-modal-title-waybill-no").html('-订单号:' + waybillNo);

                    $('#myWaybillProcessModal').modal();
                    $('#myWaybillProcessModal input[name="waybillId"]').val(waybillId);
                    $('#myWaybillProcessModal input[name="processId"]').val(processId);


                });

                $('.my-waybill-details').click(function(){
                    var waybillId = $(this).data("my-waybill-id");

                    window.location ="${ctx}/workbench/waybill/details?requestSrc=normal&waybillId="+waybillId;


                });
            }


            //----------------------------------------------------
            //加入回收站
            $('#btnBatchRecycle').click(function(){

                var waybillIds = new Array();
                $('#table-waybills input[type="checkbox"]:checked').each(function(index,item){

                    var waybillId =$(this).data('my-waybill-id');
                    console.log(waybillId);
                    waybillIds.push(waybillId);

                });

                var params={"params":waybillIds};
                $.ajax({
                    url: '${ctx}/workbench/waybill/recycle',
                    type: 'post',
                    contentType: 'application/json',
                    dataType: 'json',
                    data: JSON.stringify(params),
                    success: function (data, textStatus, jqXHR) {
                        console.log(data);
                        loadWaybills();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        // 通常 textStatus 和 errorThrown 之中
                        // 只有一个会包含信息
                        console.log("错误：" + textStatus);
                        this; // 调用本次AJAX请求时传递的options参数
                    }
                });



            });

            //-----------------------------
            //查询的按钮
            $('#idQueryButton').click(function(){
                var queryStr = $.trim($("#idQueryInput").val());
                var queryParams= {"params":{}}
                if($.trim(queryStr) !=""){
                    queryParams["queryStr"] = queryStr;
                }

                loadWaybills(queryParams);
            });

            //地图选择器
            var myRegionSelector = regionselector.init('divRegionSelector');
            myRegionSelector.click(function (param) {
                alert(param.value);

            });

            //始发地选择
            $('#btnStartLocation').click(function () {
                myRegionSelector.reset();
                $('#myRegionSelectorModal').modal();
                myRegionSelector.click(function (param) {
                    $('#inputStartLocation').val(param.text);
                    $('#inputStartLocationHidden').val(param.value);
                    $('#myRegionSelectorModal').modal('hide');

                });
            });

            //终点地选择
            $('#btnEndLocation').click(function () {
                myRegionSelector.reset();
                $('#myRegionSelectorModal').modal();
                myRegionSelector.click(function (param) {
                    $('#inputEndLocation').val(param.text);
                    $('#inputEndLocationHidden').val(param.value);
                    $('#myRegionSelectorModal').modal('hide');

                });
            });

        })
    </script>
</body>

</html>